import React from 'react';
import { Grid, Card, CardMedia, CardContent, Typography, Button } from '@mui/material';
import { RewardSystem } from '../models/BusinessModel';

export default function RewardMarket() {
  const handleRedeem = async (rewardId) => {
    // 实现兑换逻辑
  };

  return (
    <Grid container spacing={3}>
      {RewardSystem.rewards.map(reward => (
        <Grid item xs={12} sm={6} md={4} key={reward.id}>
          <Card>
            <CardMedia
              component="img"
              height="200"
              image={reward.image}
              alt={reward.name}
            />
            <CardContent>
              <Typography variant="h6">{reward.name}</Typography>
              <Typography color="text.secondary">
                {reward.description}
              </Typography>
              <Typography variant="h6" color="primary" sx={{ mt: 2 }}>
                {reward.points} 积分
              </Typography>
              <Button
                variant="contained"
                fullWidth
                sx={{ mt: 2 }}
                onClick={() => handleRedeem(reward.id)}
              >
                立即兑换
              </Button>
            </CardContent>
          </Card>
        </Grid>
      ))}
    </Grid>
  );
} 